<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  
</body>
<script>

  // 测试接口：无请求参数
  // const url = "http://127.0.0.1:5500/day26/data/test.txt";

  // 登录接口：
  // const url = "http://10.11.55.86:3000/login?username=admin&password=123456";

  // 获取用户信息接口：
  // const url = "http://10.11.55.86:3000/getuser?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1SWQiOiJ1c2VyLTI5MWQxODMwLWRmMjUtMTFlZC1hN2U5LWM3MDFiOGNhYTQzYiIsInVzZXJuYW1lIjoiYWRtaW4iLCJwb3dlciI6MCwiaWF0IjoxNjg3MTU1MzgxLCJleHAiOjE2ODcxNTg5ODF9.8ZW4dvdSumYt8iPTXGGddVNmG0bGmABKUAG8zioKlG4";

  // 发起后端请求
  // const xhr = new XMLHttpRequest;
  // xhr.open("get", url);
  // xhr.send();
  // xhr.onreadystatechange = function(){
  //   if(xhr.readyState === 4 && xhr.status === 200){
  //     console.log(JSON.parse(xhr.responseText));
  //   }
  // }


  // location.search的部分，就是向后端发送的get数据

  // get数据的位置：url后拼接search数据


  // http://10.11.55.86:3000/login?username=用户名&password=密码

  // 名字：后端能接收的参数名

  // https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=html&fenlei=256&rsv_pq=0x9516a6c8000f04fa&rsv_t=7db9w3WL6op3bvEGKWJlwjNuAc4jN3v6kCBjX8qla9U9uV91OrXQIISKRTH2&rqlang=en&rsv_enter=1&rsv_dl=tb&rsv_sug3=14&rsv_sug1=5&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&prefixsug=html&rsp=2&inputT=4647&rsv_sug4=4647



  // ==========



  // ajax的get请求的封装



  ajaxGet({
    url:"http://10.11.55.86:3000/login",
    data:{
      username: "admin1",
      password: 12345
    },
    success: function(xhr){
      const res = JSON.parse(xhr.responseText);
      if( res.code === 0 ){
        console.log("登录成功，跳转到首页")
      }else{
        alert(res.msg);
        console.log("表单已被清空，请重新输入相关信息")
      }
    },
    error:function(code){
      console.log("请求失败了", code)
    }
  });

  // 函数定义时，接收数据
  // 函数执行时，发送数据


  function ajaxGet( {url, data={}, success, error} ){
    // 解析请求时要携带的数据
    let str = "";
    for(let i in data){
      str += `${i}=${data[i]}&`;
    }
    // 拼接到url
    url += "?" + str.slice(0,-1);
    // 开启ajax
    const xhr = new XMLHttpRequest();
    xhr.open("get", url);
    xhr.send();
    xhr.onload = function(){
      if(xhr.status === 200){
        // 请求成功，执行成功功能
        success(xhr);
      }else{
        // 请求失败，执行失败功能
        error(xhr.status);
      }
    }
  }







  
</script>
</html>